import axios from 'axios';
import React, { useState, useEffect } from 'react'
import './Museum.css'
import Bottom from '../components/Bottom'
import Header from '../components/Header';

const Museum = () => {
    const [list, setList] = useState([]);
    useEffect(() => {
        const urls = "http://192.168.72.166:8080/api/getProductsCollectionMuseumDatas";
        axios.get(urls).then(res => {
            const datas = res.data.data;
            datas.forEach((item) => {
                let img = "http://192.168.72.166:8080/" + item.museum_image;
                item.museum_image = img;
            });
            setList(datas)
        })
    }, [])
    return (
        <div>
            <div className='museums'>
                <Header />
                {
                    list.map(item => {
                        if (item.museum_id == 1) {
                            return (
                                <div className='museums_1'>
                                    <div className='museums_1_1'><h1>{item.museum_name}</h1></div>
                                    <div className='museums_1_2'>
                                        <p>{item.museum_content}</p>
                                        <img src={item.museum_image} />
                                    </div>
                                </div>
                            )
                        }
                    })
                }


            </div>
            <div className='museum_2'>
                <Bottom />
            </div>
        </div>
    )
}

export default Museum;
